<template>
	<view class="fee_main">
		<view class="fee_main_bgBox">
			<uni-forms ref="formRef" label-width="150" :model="orderFeeVo">
				<view class="item_fee" v-for="(item,index) in orderFeeVo.orderFeeDetailVos" :key="index">
					<view class="item_fee_tableHead">
						<view class="item_fee_tableHead_left" @click="item.isShow=!item.isShow">
							<span :class="item.isShow?'down_up_':'down_up'"></span>费用{{index+1}}
						</view>
						<uni-icons @click="deleteFun(index)" v-if="orderFeeVo.orderFeeDetailVos.length==1?false:true"
							type="minus-filled" color=" rgba(245, 108, 108, 1)" size="24"></uni-icons>
					</view>
					<view v-if="!item.isShow">
						<uni-forms-item label="结算类型">
							<span class="item_content">{{item.type==1?'商家承担':'平台承担'}}</span>
						</uni-forms-item>
						<uni-forms-item required :name="['orderFeeDetailVos',index,'workFeeProjectId']" label="费用项目"
							:rules="[{ required: true, errorMessage: '请选择费用项目' },]">
							<view class="item_content"><span style="width: 80%;"><uni-data-select
										v-model="item.workFeeProjectId" :clear="false" :localdata="FeeSeleList"
										@change="(val)=>changeFee(val,index)"></uni-data-select></span></view>
						</uni-forms-item>
					<!-- 	<uni-forms-item label="申请数量">
							<span class="item_content"><uni-number-box :min="1" v-model="item.qty" /></span>
						</uni-forms-item> -->
						<uni-forms-item label="单价金额" v-if="item.type==2">
							<view class="item_content" v-if="item.isChangePrice"><span
									class="input_with_span">￥<uni-easyinput maxlength="8" class="input_with"
										type="number" :clearable="false" placeholder="0.00" v-model="item.price"
										@change="changeInput(item)"></uni-easyinput></span>
							</view>
							<span class="item_content" v-else>￥{{item.price.toFixed(2)}}</span>
						</uni-forms-item>
						<uni-forms-item label="单价金额" v-else>
							<view class="item_content" v-if="item.isChangePrice"><span
									class="input_with_span">￥<uni-easyinput maxlength="8" class="input_with"
										type="number" :clearable="false" placeholder="0.00"
										v-model="item.receiveFactoryPrice"
										@change="changeInput(item)"></uni-easyinput></span>
							</view>
							<span class="item_content" v-else>￥{{item.receiveFactoryPrice.toFixed(2)}}</span>
						</uni-forms-item>
						<uni-forms-item label="总金额" v-if="item.type==2">
							<span class="item_content">￥{{(item.price*item.qty).toFixed(2)}}</span>
						</uni-forms-item>
						<uni-forms-item label="总金额" v-else>
							<span class="item_content">￥{{(item.receiveFactoryPrice*item.qty).toFixed(2)}}</span>
						</uni-forms-item>
						<uni-forms-item label="">
							<span style="color: #606266;font-size: 14px;">备注</span>
							<view class="text_input">
								<uni-easyinput type="textarea" :inputBorder="false" placeholderStyle="font-size:14px;"
									:maxlength="100" v-model="item.remark" placeholder="填写备注"></uni-easyinput>
								<view class="coun">
									{{item.remark.length}}/100
								</view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="" style="border-bottom: none;" 
							:name="['orderFeeDetailVos',index,'imgarr']"
							:rules="[{ required: true, errorMessage: '请上传图片' },]">
							<span style="color: #606266;font-size: 14px;"><span style="color:#dd524d;font-weight: bold;">*</span>图片({{item.imgarr.length}}/8)</span>
							<view class="pic_img">
								<uni-file-picker @select="(files)=>onsuccessImg(files,index)"  limit="8"
									:auto-upload="false" @delete="(file)=>ondeleteImg(file,index)"
									file-extname="jpg,jpeg,png" :imageStyles="imageStyles" file-mediatype="image"
									v-model="item.imgarr" />
							</view>
						</uni-forms-item>
					</view>
				</view>
			</uni-forms>

		</view>
		<view class="footer_order">
			<view class="footer_order_left" @click="addFeeItem">
				<uni-icons type="plus-filled" color="#00c0c0" size="28"></uni-icons>
				<p class="gray_tip">添加费用</p>
			</view>
			<view class="footer_order_right" @click="submitFun">
				<view class="btn">提交申请</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref, onMounted, reactive, watch, nextTick
	} from "vue";
	import { onReachBottom, onPullDownRefresh, onUnload, onShow, onLoad, onHide } from '@dcloudio/uni-app'
	import apiOrder from "@/util/network_api/apiOrder.js"
	import apiUpload from '@/util/network_api/upload.js'
	import _ from "lodash"
	const workId = ref(null)//工单Id
	const formRef = ref()
	onLoad(async (e) => {
		if (!e.workId) return
		workId.value = e.workId
		new Promise(() => {
			getOrderAllInclusiveFeeObj()
			getOrderServiceFeeSelectList()
		})
	})
	onUnload(() => {
		uni.hideLoading()
	})
	const imageStyles = {
		"height": 80,	// 边框高度
		"width": 80,	// 边框宽度
		"border": { // 如果为 Boolean 值，可以控制边框显示与否
			"color": "#eee",		// 边框颜色
			"width": "1px",		// 边框宽度
			"style": "solid", 	// 边框样式
		}
	}
	const orderFeeVo = ref({
		"orderFeeDetailVos": [
			{
				isShow: false,
				isChangePrice: false,
				"iamges": [],
				imgarr: [],
				"price": 0,//包费用
				payNetworkPrice: 0,
				receiveFactoryPrice: 0,//商家承担
				"qty": 1,
				"remark": "",
				"type": 1,//结算类型：1-商家承担，2-平台承担,示例值(1)
				"workFeeProjectId": null//	工单费用项目ID
			}
		]
	})
	const changeInput = (item) => {
		if (item.type == 2) {
			item.payNetworkPrice = item.price
		} else {
			item.payNetworkPrice = item.receiveFactoryPrice
		}
	}
	//  根据工单ID获取是否费用全包
	const FeeType = ref(null)
	const getOrderAllInclusiveFeeObj = () => {
		apiOrder.getOrderAllInclusiveFee(workId.value).then(res => {
			if (res.data.row) {
				FeeType.value = 2
			} else {
				FeeType.value = 1
			}
			orderFeeVo.value.orderFeeDetailVos[0].type = FeeType.value
		})
	}
	// 获取移动端工单服务费用下拉数据
	const FeeSeleList = ref([])
	const getOrderServiceFeeSelectList = () => {
		apiOrder.getOrderServiceFeeSelect().then(res => {
			FeeSeleList.value = res.data.rows.map(o => {
				o['value'] = o.id
				o['text'] = o.name
				delete o.id
				delete o.name
				return o
			})
		})
	}
	const changeFee = (id, index) => {
		FeeSeleList.value.filter(o => {
			if (o.value == id) {
				if (orderFeeVo.value.orderFeeDetailVos[index].type == 2) {
					orderFeeVo.value.orderFeeDetailVos[index].price = o.price
				} else {
					orderFeeVo.value.orderFeeDetailVos[index].receiveFactoryPrice = o.price
				}
				orderFeeVo.value.orderFeeDetailVos[index].payNetworkPrice = o.price
				orderFeeVo.value.orderFeeDetailVos[index].isChangePrice = o.updatePrice
			}
		})
	}
	const onsuccessImg = (files, index) => {
		files.tempFiles.map(o => {
			orderFeeVo.value.orderFeeDetailVos[index].imgarr.push(o)
		})
	}
	const ondeleteImg = (file, index) => {
		orderFeeVo.value.orderFeeDetailVos[index].imgarr = orderFeeVo.value.orderFeeDetailVos[index].imgarr.filter(o => {
			return o.uuid != file.tempFile.uuid
		})
	}
	// 添加费用
	const addFeeItem = () => {
		let result = orderFeeVo.value.orderFeeDetailVos.every(o => o.workFeeProjectId)
		let indexShow = orderFeeVo.value.orderFeeDetailVos.some(o => o.isShow)
		if (!result && indexShow) {
			uni.showToast({
				title: '请先选择费用项目',
				icon: 'none'
			})
			return
		}
		formRef.value.validate().then(() => {
			orderFeeVo.value.orderFeeDetailVos.push({
				isShow: false,
				isChangePrice: false,
				"iamges": [],
				imgarr: [],
				"price": 0,
				payNetworkPrice: 0,
				receiveFactoryPrice: 0,
				"qty": 1,
				"remark": "",
				"type": FeeType.value,//结算类型：1-向商家收取，2-向平台收取,示例值(1)
				"workFeeProjectId": null//	工单费用项目ID
			})
		})

	}
	// 删除费用
	const deleteFun = (index) => {
		orderFeeVo.value.orderFeeDetailVos.splice(index, 1)
	}
	// 提交
	const submitFun = async () => {
		if (!workId.value) return
		let result = orderFeeVo.value.orderFeeDetailVos.every(o => o.workFeeProjectId)
		let indexShow = orderFeeVo.value.orderFeeDetailVos.some(o => o.isShow)
		if (!result && indexShow) {
			uni.showToast({
				title: '请先选择费用项目',
				icon: 'none'
			})
			return
		}
		await formRef.value.validate().then(async res => {
			uni.showLoading({
				title: '加载中...'
			})
			for (let i = 0; i < orderFeeVo.value.orderFeeDetailVos.length; i++) {
				let item = orderFeeVo.value.orderFeeDetailVos[i]
				item.iamges = []
				if (item.imgarr.length > 0) {
					for (let j = 0; j < item.imgarr.length; j++) {
						let img = item.imgarr[j]
						await apiUpload.uploadOrderFile({ files: img.file }).then(res => {
							item.iamges.push(res.data.rows[0])
						})
					}
				}
			}
			let dataObj = _.cloneDeep(orderFeeVo.value)
			dataObj.orderFeeDetailVos = dataObj.orderFeeDetailVos.map(o => {
				delete o.imgarr
				delete o.isShow
				delete o.isChangePrice
				return o
			})
			await apiOrder.saveApplyFee(dataObj, workId.value).then(res => {
				if (res.code == 20000) {
					uni.hideLoading()
					uni.showToast({
						title: '申请服务费',
						icon: 'success'
					})
					uni.setStorageSync('order_detail', 1)
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/pages_network/order/detail?workId=' + workId.value
						})
					}, 600)
				}
			})
			uni.hideLoading()
		}).catch(err => { })

	}
</script>

<style lang="scss" scoped>
	.fee_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100%;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: auto;

		&_bgBox {
			margin: 24rpx;
			padding-bottom: 10vh;

			.item_fee {
				background-color: #fff;
				padding: 24rpx;
				margin-bottom: 24rpx;

				:deep(.uni-forms-item) {
					margin-bottom: 20rpx;
					border-bottom: 1rpx solid rgb(243, 244, 248);

				}

				:deep(.uni-select) {
					border: none;

					.uni-select__input-placeholder {
						text-align: right;
						margin-right: 12rpx;
						font-size: 28rpx;
						color: #999;
					}

					.uni-select__input-text {
						text-align: right;
						margin-right: 12rpx;
					}

					.uni-popper__arrow {
						left: 90%;
					}

					.uni-select__selector {
						top: 100%;
					}
				}

				&_tableHead {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 24rpx;

					&_left {
						font-size: 28rpx;
						font-weight: bold;
						display: flex;
						align-items: center;

						.down_up {
							width: 0;
							height: 0;
							border-right: 12rpx solid transparent;
							border-left: 12rpx solid transparent;
							border-top: 14rpx solid #000;
							margin-right: 6rpx;
						}

						.down_up_ {
							width: 0;
							height: 0;
							border-right: 12rpx solid transparent;
							border-left: 12rpx solid transparent;
							border-bottom: 14rpx solid #000;
							margin-right: 6rpx;
						}
					}
				}

				.item_content {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 100%;

					.input_with_span {
						display: flex;
						align-items: center;
						height: 28px;
						margin-bottom: 10px;
					}

					:deep(.input_with) {
						.uni-easyinput__content {
							width: 180rpx !important;
						}
					}
				}

				.text_input {
					margin: 24rpx 0 0;
					position: relative;

					:deep(.uni-easyinput__content-textarea) {
						margin: 0;
					}

					padding: 12rpx 12rpx 24rpx;
					background-color:#fff;
					border: 2rpx solid rgb(243, 244, 248);
					border-bottom: none;

					.coun {
						font-size: 22rpx;
						position: absolute;
						right: 12rpx;
						bottom: 6rpx;
						color: #999;
					}
				}

				.pic_img {
					margin-top: 24rpx;
					margin-left: 14rpx;
					:deep(.icon-add) {
						width: 30rpx;
						height: 3rpx;
						background-color: #aaa;
					}

					:deep(.icon-del) {
						width: 24rpx;
					}

					:deep(.icon-del-box) {
						width: 40rpx;
						height: 40rpx;
						top: 0;
						right: 0;
						background-color: rgba(0, 0, 0, 0.3);
					}

					:deep(.uni-progress-bar) {
						display: none;
					}
				}
			}
		}

		.footer_order {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			z-index: 99;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 48rpx;
			box-sizing: border-box;
			border-top: 1rpx solid rgba(177, 177, 177, 0.1);

			&_left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				margin-right: 24rpx;

				.gray_tip {
					color: #00c0c0;
				}
			}

			&_right {
				flex: 1;
				border-radius: 45rpx;
				height: 80rpx;
				background-color: #007cff;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
</style>